<template>
  <div class="conatiner">
    <van-nav-bar>
      <template #left>
        <i class="iconfont icon-zuojiantou" style="font-size:0.5rem; color:#ffffff" @click="goService"></i>
        <span style="color:#ffffff;margin-left:5px">新增缴费账户</span>
      </template>
      <template #right>
        <van-icon name="location-o" size="18" color="#fff5f6" />
      </template>
    </van-nav-bar>
    <div class="title" style="margin:10px 5px">
        <van-icon class="iconfont icon-shandian" color="#ffd341" style="font-size:20px" />
    <span style="font-size: 16px;">电费</span>
    </div>
    <!-- 缴费页面 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset >
        <van-field
          v-model="num"
          name="缴费单位"
          label="缴费单位"
          placeholder="缴费单位"
          :rules="[{ required: true, message: '请填写缴费单位' }]"
        />
        <van-field
          v-model="number"
          name="客户编号"
          label="客户编号"
          placeholder="请输入客户编号"
          :rules="[{ required: true, message: '请填写客户编号' }]"
        />
      </van-cell-group>
      <van-checkbox v-model="checked" style="width:365px;font-size: 10px;margin-top: 10px;padding-left:10px" icon-size="12px">同意《宜居自助缴费协议》</van-checkbox>
      <div style="margin: 16px">
        <van-button round block color="#ff5555"> 下一步 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      num: '',
      number: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    goService(){
         this.$router.push({path: "/service"})
       }
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background: #ff5555;
  
}
/deep/.van-nav-bar__left{
  padding: 0 5px;
}
/deep/.van-nav-bar .van-icon {
    color: #fff5f6;
    
}
/deep/.van-nav-bar__text {
    color: #fff5f6;
}
</style>>

